<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
  <?php foreach ($breadcrumbs as $breadcrumb) { ?>
  <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
  <?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
  <div class="heading">
    <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_manage; ?></h1>
    <div class="buttons"><a onclick="$('#form').submit();" class="button"><span><?php echo $button_save; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_cancel; ?></span></a></div>
  </div>
  <div class="content">
  <style>
	  .itemlist
	  {
		  display:none;
	  }
	  .item-table
	  {
		  margin:3%;
	  }
	  .rangediv
	  {
		  display:inline-block;
	  }
	  .rangetd
	  {
		  display:none;
	  }
  </style>
    <form action="<?php echo $action; ?>" method="post" id="form">
	    <table class="list" id="filter-list">
     <?php
	     echo <<<HTML
	     <thead>
		     <tr>
			     <td>{$text_name}</td>
			     <td colspan="3">{$text_range}</td>
			     <td>{$text_sort_order}</td>
			     <td>&nbsp;</td>
		     </tr>
	     </thead>
	     <tbody>
HTML;
		foreach($filters as $f_instance)
		{
			$instock_opts='';
			foreach($stock_status as $ss)
			{
				$selected=(in_array($ss["stock_status_id"],$f_instance["instock"]))?'selected="selected"':'';
				$instock_opts.=<<<HTML
				<option {$selected} value="{$ss["stock_status_id"]}">{$ss["name"]}</option>
HTML;
			}
			echo <<<HTML
			<tr class="filter-row" index="{$f_instance["filter_id"]}">
				<td><input type="text" name="filter[{$f_instance["filter_id"]}][name]" value="{$f_instance["name"]}"></td>
				<td>
					{$text_limited_by}
					<select class="range_type" index="{$f_instance["filter_id"]}" name="filter[{$f_instance["filter_id"]}][range_type]" assign="{$f_instance["range_type"]}">
						<option value="na">{$text_nothing}</option>
						<option value="a">{$text_attribute}</option>
						<option value="ag">{$text_attribute_group}</option>
						<option value="c">{$text_category}</option>
						<option value="m">{$text_manufacturer}</option>
					</select>
				</td>
				<td class="range_field" index="{$f_instance["filter_id"]}">
					<select name="filter[{$f_instance["filter_id"]}][range_id]" assign="{$f_instance["range_id"]}">
					</select>
				</td>
				<td>
					{$text_only_stock}
					<select name="filter[{$f_instance["filter_id"]}][instock][]" multiple="multiple">{$instock_opts}</select>
				</td>
				<td><input type="text" size="3" name="filter[{$f_instance["filter_id"]}][sort_order]" value="{$f_instance["sort_order"]}"></td>
				<td>
					<div class="buttons">
						<a onclick="editItems({$f_instance["filter_id"]})" class="button"><span>{$button_edit_items}</span></a>
						<a onclick="removeFilter({$f_instance["filter_id"]});" class="button"><span>{$button_remove}</span></a>
					</div>
				</td>
			</tr>

			<tr class="itemlist" index="{$f_instance["filter_id"]}">
				<td colspan="5">
					<table class="list item-table">
						<thead>
							<tr>
								<td>{$text_item_title}</td>
								<td colspan="2">{$text_item_type}</td>
								<td class="displaytd" index="{$f_instance["filter_id"]}" colspan="3">{$text_display}</td>
								<td>{$text_sort_order}</td>
								<td>&nbsp;</td>
							</tr>
						</thead>
						<tbody>
HTML;
		
		foreach($f_instance["items"] as $f_item)
		{
			if($f_item["range"])
			{
				$rangeType=(isset($product_fields[$f_item["product_field"]]) && $product_fields[$f_item["product_field"]]["date"])?'date':'numeric';
				$isdate=($rangeType=='date')?'datepicker="datepicker"':'';
				$range_div=<<<HTML
				<p>{$text_range} <input class="rangecheck" checked="checked" index="{$f_item["filter_item_id"]}" type="checkbox" value="1" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][range][exists]"></p>
				<table class="rangetable" index="{$f_item["filter_item_id"]}" initial="1">
					<thead>
						<tr>
							<td>{$text_min}</td>
							<td>{$text_max}</td>
							<td>&nbsp;</td>
						</tr>
					</thead>
					<tbody>
HTML;
				foreach(explode(",",$f_item["range"]) as $key=>$range_pair)
				{
					list($min,$max)=explode(":",$range_pair);
					$range_div.=<<<HTML
						<tr rangeindex="{$key}">
							<td><input size="8" {$isdate} type="text" value="{$min}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][range][min][]"></td>
							<td><input size="8" {$isdate} type="text" value="{$max}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][range][max][]"></td>
							<td><a class="button" onclick="removeRangeItem({$f_item["filter_item_id"]},{$key})"><span>{$button_remove_range_item}</span></a></td>
						</tr>
HTML;
				}
				
				$range_div.=<<<HTML
					</tbody>
					<tfoot>
						<tr>
							<td colspan=2"">&nbsp;</td>
							<td><a class="button" onclick="addNewRange({$f_instance["filter_id"]},{$f_item["filter_item_id"]},'{$rangeType}')"><span>{$button_new}</span></a></td>
						</tr>
					</tfoot>
				</table>
HTML;
			}
			else
			{
				$range_div='';
			}
			$check_multiple=($f_item["multiple"])?'checked="checked"':'';
			$item_id_pf=($f_item["item_type"]=='pf')?$f_item["product_field"]:$f_item["item_id"];
			echo <<<HTML
			<tr class="filter-item-row" index="{$f_item["filter_item_id"]}">
				<td><input type="text" value="{$f_item["title"]}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][title]" /></td>
				<td>
					<select class="item-type" index="{$f_item["filter_item_id"]}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][item_type]" assign="{$f_item["item_type"]}">
						<option value="pf">{$text_product_field}</option>
						<option value="a">{$text_attribute}</option>
						<option value="ag">{$text_attribute_group}</option>
					</select>
				</td>
				<td class="item-type-list" findex="{$f_instance["filter_id"]}" index="{$f_item["filter_item_id"]}"><select findex="{$f_instance["filter_id"]}" index="{$f_item["filter_item_id"]}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][item_id_pf]" assign="{$item_id_pf}"></select></td>
				<td>
					<select class="display" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][display]" assign="{$f_item["display"]}">
						<option value="select">{$text_select}</option>
						<option value="list">{$text_list}</option>
					</select>
				</td>
				<td colspan="2" class="multipletd" index="{$f_item["filter_item_id"]}">
					{$text_multiple} <input {$check_multiple} type="checkbox" value="1" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][multiple]" />
				<td class="rangetd" findex="{$f_instance["filter_id"]}" index="{$f_item["filter_item_id"]}"><div class="rangediv" index="{$f_item["filter_item_id"]}">{$range_div}</div></td>
				</td>
				<td><input type="text" size="3" value="{$f_item["sort_order"]}" name="filter[{$f_instance["filter_id"]}][items][{$f_item["filter_item_id"]}][sort_order]" /></td>
				<td><a class="button" onclick="removeFilterItem('{$f_item["filter_item_id"]}')"><span>{$text_remove_item}</span></a></td>
			</tr>
HTML;
		}
		
		echo <<<HTML
						</tbody>
						<tfoot>
							<td colspan="7"></td>
							<td><a class="button" onclick="addFilterItem('{$f_instance["filter_id"]}')"><span>{$text_add_item}</span></a></td>
						</tfoot>
					</table>
				</td>
				<td>&nbsp;</td>
			</tr>
HTML;
		}
	echo <<<HTML
	</tbody>
	<tfoot>
		<td colspan="5">&nbsp;</td>
		<td><a class="button" onclick="addFilter()"><span>{$text_add_filter}</span></a></td>
	</tfoot>
HTML;
     ?>
     </table>
    </form>
  </div>
</div>
<style src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.12/jquery.multiselect.css" type="text/css" media="screen" /></style>
<script type="text/javascript" language="javascript" src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.12/src/jquery.multiselect.min.js"></script>
<script type="text/javascript">
	var msOpts={
		"checkAllText":"<?php echo $text_check_all ?>",
		"uncheckAllText":"<?php echo $text_uncheck_all ?>",
		"noneSelectedText":"<?php echo $text_none_selected ?>",
		"selectedText":"# <?php echo $text_selected ?>"
	};
	var dpOpts={
		"dateFormat":"yy-mm-dd",
		"dayNamesMin":["<?php echo $day_su ?>","<?php echo $day_mo ?>","<?php echo $day_tu ?>","<?php echo $day_we ?>","<?php echo $day_th ?>","<?php echo $day_fr ?>","<?php echo $day_sa ?>"],
		"monthNames":["<?php echo $month_jenuary ?>","<?php echo $month_february ?>","<?php echo $month_march ?>","<?php echo $month_april ?>","<?php echo $month_may ?>","<?php echo $month_june ?>","<?php echo $month_july ?>","<?php echo $month_august ?>","<?php echo $month_september ?>","<?php echo $month_october ?>","<?php echo $month_november ?>","<?php echo $month_december ?>"]
		};
	var filterKey=0;
	function addFilter()
	{
		html='	<tr class="filter-row" index="new'+filterKey+'">';
		html+='		<td><input type="text" name="filter[new'+filterKey+'][name]"></td>';
		html+='		<td>';
		html+='			<?php echo $text_limited_by ?>';
		html+='			<select class="range_type" index="new'+filterKey+'" name="filter[new'+filterKey+'][range_type]"">';
		html+='				<option value="na"><?php echo $text_nothing ?></option>';
		html+='				<option value="a"><?php echo $text_attribute ?></option>';
		html+='				<option value="ag"><?php echo $text_attribute_group ?></option>';
		html+='				<option value="c"><?php echo $text_category ?></option>';
		html+='				<option value="m"><?php echo $text_manufacturer ?></option>';
		html+='			</select>';
		html+='		</td>';
		html+='		<td class="range_field" index="new'+filterKey+'">';
		html+='			<select name="filter[new'+filterKey+'][range_id]">';
		html+='			</select>';
		html+='		</td>';
		html+='		<td>';
		html+='			<?php echo $text_only_stock ?>';
		html+='			<select index="new'+filterKey+'" name="filter[new'+filterKey+'][instock][]" multiple="multiple"><?php
				foreach($stock_status as $ss)
				{
					echo <<<HTML
					<option value="{$ss["stock_status_id"]}">{$ss["name"]}</option>
HTML;
				}
		?></select>';
		html+='		</td>';
		html+='		<td><input type="text" size="3" name="filter[new'+filterKey+'][sort_order]"></td>';
		html+='		<td>';
		html+='			<div class="buttons">';
		html+='				<a onclick="editItems(\'new'+filterKey+'\')" class="button"><span><?php echo $button_edit_items ?></span></a>';
		html+='				<a onclick="removeFilter(\'new'+filterKey+'\')" class="button"><span><?php echo $button_remove ?></span></a>';
		html+='			</div>';
		html+='		</td>';
		html+='	</tr>';
		html+='	<tr class="itemlist" index="new'+filterKey+'">';
		html+='		<td colspan="5">';
		html+='			<table class="list item-table">';
		html+='				<thead>';
		html+='					<tr>';
		html+='						<td><?php echo $text_item_title ?></td>';
		html+='						<td colspan="2"><?php echo $text_item_type ?></td>';
		html+='						<td class="displaytd" index="new'+filterKey+'" colspan="3"><?php echo $text_display ?></td>';
		html+='						<td><?php echo $text_sort_order ?></td>';
		html+='						<td>&nbsp;</td>';
		html+='					</tr>';
		html+='				</thead>';
		html+='				<tbody>';
		html+='				</tbody>';
		html+='				<tfoot>';
		html+='					<td colspan="7"></td>';
		html+='					<td><a class="button" onclick="addFilterItem(\'new'+filterKey+'\')"><span><?php echo $text_add_item ?></span></a></td>';
		html+='				</tfoot>';
		html+='			</table>';
		html+='		</td>';
		html+='		<td>&nbsp;</td>';
		html+='	</tr>';
		$('#filter-list>tbody').append(html);
		updateList('.range_type[index="new'+filterKey+'"]','.range_field');
		$('.range_type[index="new'+filterKey+'"]').change();
		$('[index="new'+filterKey+'"][multiple="multiple"]').multiselect(msOpts);
		
		filterKey++;
	}
	var itemKey=0;
	function addFilterItem(filterIndex)
	{
		html='	<tr class="filter-item-row" index="new'+itemKey+'">';
		html+='		<td><input type="text" name="filter['+filterIndex+'][items][new'+itemKey+'][title]" /></td>';
		html+='		<td>';
		html+='			<select class="item-type" index="new'+itemKey+'" name="filter['+filterIndex+'][items][new'+itemKey+'][item_type]">';
		html+='				<option value="pf"><?php  echo $text_product_field ?></option>';
		html+='				<option value="a"><?php echo $text_attribute ?></option>';
		html+='				<option value="ag"><?php echo $text_attribute_group ?></option>';
		html+='			</select>';
		html+='		</td>';
		html+='		<td class="item-type-list" findex="'+filterIndex+'" index="new'+itemKey+'"><select findex="'+filterIndex+'" index="new'+itemKey+'" name="filter['+filterIndex+'][items][new'+itemKey+'][item_id_pf]"></select></td>';
		html+='		<td>';
		html+='			<select class="display" name="filter['+filterIndex+'][items][new'+itemKey+'][display]">';
		html+='				<option value="select"><?php echo $text_select ?></option>';
		html+='				<option value="list"><?php echo $text_list ?></option>';
		html+='			</select>';
		html+='		</td>';
		html+='		<td colspan="2" class="multipletd" index="new'+itemKey+'">';
		html+='			<?php echo $text_multiple ?> <input type="checkbox" value="1" name="filter['+filterIndex+'][items][new'+itemKey+'][multiple]" />';
		html+='		<td class="rangetd" findex="'+filterIndex+'" index="new'+itemKey+'"><div class="rangediv" index="new'+itemKey+'"></div></td>';
		html+='		</td>';
		html+='		<td><input type="text" size="3" name="filter['+filterIndex+'][items][new'+itemKey+'][sort_order]" /></td>';
		html+='		<td><a class="button" onclick="removeFilterItem(\'new'+itemKey+'\')"><span><?php echo $text_remove_item ?></span></a></td>';
		html+='	</tr>';
		$('.itemlist[index="'+filterIndex+'"] .item-table>tbody').append(html);
		$('.item-type-list[index="new'+itemKey+'"]>select').change(isThereRange);
		updateList('.item-type[index="new'+itemKey+'"]','.item-type-list');
		$('.item-type[index="new'+itemKey+'"]').change();
		itemKey++;
	}
	function removeFilter(filterIndex)
	{
		$('.filter-row[index="'+filterIndex+'"]').remove();
	}
	function removeFilterItem(itemIndex)
	{
		$('.filter-item-row[index="'+itemIndex+'"]').remove();
	}
	function editItems(filterId)
	{
		$('.itemlist:not([index="'+filterId+'"])').hide();
		$filter=$('.itemlist[index="'+filterId+'"]');
		if($filter.css('display')=='none')
		{
			$filter.show();
		}
		else
		{
			$filter.hide();
		}
	}
	
	function updateList(ref,target)
	{
		$(ref).change(function(){
			if($(this).val()=='na')
			{
				$(target).filter('[index="'+$(this).attr('index')+'"]').children('select').hide();
				return 0;
			}
			$(target).filter('[index="'+$(this).attr('index')+'"]').children('select').html(rangeOpts[$(this).val()]);
			$(target).filter('[index="'+$(this).attr('index')+'"]').children('select').change();
			$(target).filter('[index="'+$(this).attr('index')+'"]').children('select').show();
		});
	}
	
	function setValues(ref,target)
	{
		$(ref).each(function(){
			$(this).val($(this).attr('assign'));
			$(this).change();
			if(target)
			{
				$range_field=$(target+'[index="'+$(this).attr('index')+'"]>select');
				$range_field.val($range_field.attr('assign'));
				//$range_field.change();
			}
		});
	}
	
	function makeRangeDiv(filterId,itemId,rangeType)
	{
		if($('.rangediv[index="'+itemId+'"] table').attr('initial')=='1')
		{
			$('.rangediv[index="'+itemId+'"] table').attr('initial',0);
			return $('.rangediv[index="'+itemId+'"]').html();
		}
		
		var isDate=(rangeType=='date')?'datepicker="datepicker"':'';
		
		var html='<p><?php echo $text_range ?> <input class="rangecheck" index="'+itemId+'" type="checkbox" value="1" name="filter['+filterId+'][items]['+itemId+'][range][exists]"></p>';
		html+=	'	<table class="rangetable" index="'+itemId+'" initial="0">';
		html+=	'		<thead>';
		html+=	'			<tr>';
		html+=	'				<td><?php echo $text_min ?></td>';
		html+=	'				<td><?php echo $text_max ?></td>';
		html+=	'				<td>&nbsp;</td>';
		html+=	'			</tr>';
		html+=	'		</thead>';
		html+=	'		<tbody>';
		html+=	'			<tr rangeindex="0">';
		html+=	'				<td><input size="8" '+isDate+' type="text" value="" name="filter['+filterId+'][items]['+itemId+'][range][min][]"></td>';
		html+=	'				<td><input size="8" '+isDate+' type="text" value="" name="filter['+filterId+'][items]['+itemId+'][range][max][]"></td>';
		html+=	'				<td><a class="button" onclick="removeRangeItem(\''+itemId+'\',0)"><span><?php echo $button_remove_range_item ?></span></a></td>';
		html+=	'			</tr>';
		html+=	'		</tbody>';
		html+=	'		<tfoot>';
		html+=	'			<tr>';
		html+=	'				<td colspan=2"">&nbsp;</td>';
		html+=	'				<td><a class="button" onclick="addNewRange(\''+filterId+'\',\''+itemId+'\',\''+rangeType+'\')"><span><?php echo $button_new ?></span></a></td>';
		html+=	'			</tr>';
		html+=	'		</tfoot>';
		html+=	'	</table>';
		
		return html;
	}
	
	function removeRangeItem(filterItem,rangeItem)
	{
		$('.rangediv[index="'+filterItem+'"] tr[rangeindex="'+rangeItem+'"]').remove();
	}
	var rangeKey=0;
	function addNewRange(filterIndex,itemIndex,rangeType)
	{
		var isDate=(rangeType=='date')?'datepicker="datepicker"':'';
		html=	'			<tr rangeindex="new'+rangeKey+'">';
		html+=	'				<td><input size="8" '+isDate+' type="text" value="" name="filter['+filterIndex+'][items]['+itemIndex+'][range][min][]"></td>';
		html+=	'				<td><input size="8" '+isDate+' type="text" value="" name="filter['+filterIndex+'][items]['+itemIndex+'][range][max][]"></td>';
		html+=	'				<td><a class="button" onclick="removeRangeItem(\''+itemIndex+'\',\'new'+rangeKey+'\')"><span><?php echo $button_remove_range_item ?></span></a></td>';
		html+=	'			</tr>';
		$('.rangetable[index="'+itemIndex+'"]>tbody').append(html);
		$('[rangeindex="new'+rangeKey+'"] [datepicker="datepicker"]').datepicker(dpOpts);
		rangeKey++;
		
	}
	
	var rangeOpts=new Array();
	rangeOpts['a']='<?php
		foreach($attributes as $attr)
		{
			echo '<option value="'.$attr["id"].'">'.$attr["name"].'</option>';
		}
	?>';
	rangeOpts['ag']='<?php
		foreach($attribute_groups as $ag)
		{
			echo '<option value="'.$ag["id"].'">'.$ag["name"].'</option>';
		}
	?>';
	rangeOpts['c']='<?php
		foreach($categories as $cat)
		{
			echo '<option value="'.$cat["id"].'">'.$cat["name"].'</option>';
		}
	?>';
	rangeOpts['m']='<?php
		foreach($manufacturers as $man)
		{
			echo '<option value="'.$man["id"].'">'.$man["name"].'</option>';
		}
	?>';
	rangeOpts['pf']='<?php
		foreach($product_fields as $pf)
		{
			$range_type=($pf["numeric"])?'numeric':(($pf["date"])?'date':'');
			echo '<option range="'.$range_type.'" value="'.$pf["field"].'">'.$pf["text"].'</option>';
		}
	?>';
	
	function rangeCheckCallBack()
	{
		if($(this).is(':checked'))
		{
			console.log(1);
			$('.rangetable[index="'+$(this).attr('index')+'"]').show();
		}
		else
		{
			console.log(2);
			$('.rangetable[index="'+$(this).attr('index')+'"]').hide();
		}
	}
	function isThereRange(){
			var index=$(this).attr('index');
			var findex=$(this).attr('findex');
			if($(this).find('option:selected').attr('range'))
			{
				$('.rangetd[index="'+index+'"]').show();
				$('.multipletd[index="'+index+'"]').attr('colspan',1);
				$('.rangediv[index="'+index+'"]').html(makeRangeDiv(findex,index,$(this).find('option:selected').attr('range')));
				$('.rangediv[index="'+index+'"] [datepicker="datepicker"]').datepicker(dpOpts);
				$('.rangecheck[index="'+index+'"]').change(rangeCheckCallBack);
				$('.rangecheck[index="'+index+'"]').change();
			}
			else
			{
				$('.rangetd[index="'+index+'"]').hide();
				$('.multipletd[index="'+index+'"]').attr('colspan',2);
				$('.rangediv[index="'+index+'"]').html('');
			}
		}
	
	$().ready(function(){
		$('[multiple="multiple"]').multiselect(msOpts);
		//$('[datepicker="datepicker"]').datepicker(dpOpts);
		$('.item-type-list>select').change(isThereRange);
		
		
		updateList('.range_type','.range_field');
		setValues('.range_type','.range_field');
		
		updateList('.item-type','.item-type-list');
		setValues('.item-type','.item-type-list');
		
		setValues('.display');
		
		$('.rangecheck').change(rangeCheckCallBack);
		
		$('.rangecheck').change();
		
	});
</script>
<?php echo $footer; ?>